<template>
  <div>

    <el-form ref="elForm" :model="yanjiuData" size="medium" label-width="150px">
      <el-form-item label="患者是否完成本研究:">
        <el-radio-group v-model="yanjiuData.studyCompleted" style="margin-top: 10px" :disabled="this.isModel">
          <el-radio v-model="radio" label="0">是</el-radio>
          <p></p>
          <el-radio v-model="radio" label="1" style="margin-top: 10px">否
            <span style="margin-left: 10px" v-show="yanjiuData.studyCompleted === '1' ">
              请表述原因: <input style="width: 100%; outline: none; border: none;border-bottom: 1px solid"
                                 v-model="yanjiuData.reasonNotCompleted" :disabled="this.isModel">
            </span>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 出院日期 -->
      <el-form-item label="出院日期:" label-width="80px">
        <el-date-picker
          v-model="yanjiuData.dischargeDate"
          type="date"
          placeholder="请选择出院日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 40%;"
          @change="calculatePostOpDays"
          :default-value="new Date()"
          :disabled="true"
        />
      </el-form-item>

      <el-form-item label="术后住院天数:" label-width="106px">
        <span>{{ yanjiuData.postOpHospitalDays }} 天</span>
      </el-form-item>
    </el-form>

    <el-row :gutter="24" style="width: 100%;margin-left: 30%">
      <el-col :span="8">
        <el-button v-if="!this.uploadLock" @click="cancelForm">取消</el-button>
      </el-col>
      <el-col :span="8">
        <el-button v-if="!this.uploadLock" type="primary" @click="onSubmit">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {listCompletion, updateCompletion, addCompletion} from "@/api/completion/completion";
import { listCrfOne } from "@/api/crfOne/crfOne"; // 导入API
export default {
  components: {},
  props: [],
  data() {
    return {
      isModel: false,
      uploadLock: true,
      yanjiuData: {
        surgeryDate: '', // 这里你可以使用实际API数据返回的surgeryEndTime
        testerId: '',
        studyCompleted: '',
        reasonNotCompleted: null,
        dischargeDate: new Date().toISOString().split('T')[0],
        postOpHospitalDays: '',
        status: '',
      },
      radio: '',
    }
  },
  computed: {},
  created() {
    if (this.$route.query.id && this.$route.query.f === '1') {
      this.uploadLock = false;
    }else{
      this.isModel = true;
    }
    if (this.$route.query.id != null) {
      listCompletion(this.$route.query.id).then(res => {
        console.log(res)
        if (res) {
          this.yanjiuData = res
          if (this.yanjiuData.studyCompleted === 1) {
            this.yanjiuData.studyCompleted = '1'
          } else {
            this.yanjiuData.studyCompleted = '0'
          }
        }
      })
    }
  },
  mounted() {
    const testerId = this.$route.query.id; // 从路由获取ID
    if (testerId) {
      this.fetchSurgeryData(testerId); // 调用API获取手术日期
    }
  },
  methods: {
    onSubmit() {
      this.yanjiuData.status = 1
      this.yanjiuData.testerId = this.$route.query.id
      listCompletion(this.$route.query.id).then(res => {
        console.log(res)
        if (res) {
          updateCompletion(this.yanjiuData).then(res => {
            console.log("修改了")
            this.$message.success("修改成功");
          })
        } else {
          addCompletion(this.yanjiuData).then(res => {
            console.log("提交了")
            this.$message.success("提交成功");
          })
        }
      })
    },
    cancelForm() {
      this.$router.go(-1);
    },
    // 计算术后住院天数
    calculatePostOpDays() {
      if (this.yanjiuData.dischargeDate && this.yanjiuData.surgeryDate) {
        const dischargeDate = new Date(this.yanjiuData.dischargeDate);
        const surgeryDate = new Date(this.yanjiuData.surgeryDate);

        // 计算住院天数
        const timeDiff = dischargeDate - surgeryDate;
        const days = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); // 将毫秒转换为天数
        this.yanjiuData.postOpHospitalDays = days > 0 ? days : 0;
      } else {
        this.yanjiuData.postOpHospitalDays = ''; // 没有选定日期时清空住院天数
      }
    },
    // 获取手术日期
    fetchSurgeryData(id) {
      listCrfOne(id).then((response) => {
        this.yanjiuData.surgeryDate = response.surgeryDate; // 获取手术日期
        // 自动调用计算术后住院天数
        this.calculatePostOpDays();
      }).catch((error) => {
        console.error("获取手术数据失败", error);
      });
    },
  }
}

</script>
<style>
</style>
